<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/menu1.css" />
		<title>练习02 实现菜单的收缩与扩展</title>
	</head>

	<body>
		<div id="leftNav" class="left-nav">
			<div id="myMenu" class="menuBox">
				<ul class="spMenuBox" >
					<li class="spMenuItem">
						<div class="spMenu" >
							<i class="fa fa-folder"></i>
							<span >菜单1</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox">
							<li><span class="subMenu">菜单1.1</span></li>
							<li><span class="subMenu">菜单1.2</span></li>
							<li><span class="subMenu">菜单1.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i class="fa fa-folder"></i>
							<span>菜单2</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" >
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i class="fa fa-folder"></i>
							<span>菜单3</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" >
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i class="fa fa-folder"></i>
							<span>菜单4</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" >
							<li><span class="subMenu">菜单4.1</span></li>
							<li><span class="subMenu">菜单4.2</span></li>
							<li><span class="subMenu">菜单4.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i class="fa fa-folder"></i>
							<span>菜单5</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" >
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
						</ul>
					</li>
				</ul>
			</div>
		
		</div>
	</body>
	<script>
		// 189000561朱一月
		let  spMenuItem = document.querySelectorAll(".spMenuItem");
		//点击事件
		for (let i = 0; i < spMenuItem.length; i++) {  //操作每个当前点击的菜单
			let spMenu = spMenuItem[i].querySelector(".spMenu");
			let subMenuBox = spMenuItem[i].querySelector(".subMenuBox");
			let folder = spMenuItem[i].getElementsByTagName("i")[0];

			spMenu.onclick = function(){
				if(subMenuBox.style.display == 'block'){
					subMenuBox.style.display = "none";
					folder.className = "fa fa-folder";
					spMenuItem[i].className = "spMenuItem";
				}else{
					subMenuBox.style.display = "block";
					folder.className = "fa fa-folder-open";
					spMenuItem[i].className = "spMenuItem active";
				}


			}	
		}
		//隐藏
		//显现
		
		
	</script>

</html>
